<template>
  <div class="wrap-left-form" v-loading="loading">
    <el-form
      class="custom-form"
      ref="formRef"
      :model="formData"
      label-width="120px"
      :inline="true"
      :rules="rules"
    >
      <div class="form-group-title" id="detail">基本信息</div>
      <div class="group-box">
        <el-form-item class="form-itme-width_50" label="设备名称" prop="rlistName">
          {{ infoList.materialName || '-' }}
        </el-form-item>
        <el-form-item class="form-itme-width_50" label="关联任务" prop="relatedAttachments">
          <dc-view objectName="planItem" v-model="formData.taskId" />
        </el-form-item>
        <el-form-item class="form-itme-width_50" label="专案号">
          {{ infoList.planTrackingNumber || '-' }}
        </el-form-item>
        <el-form-item class="form-itme-width_50" label="参考资料">
          {{ infoList.customerId || '-' }}
        </el-form-item>
        <el-form-item class="form-itme-width_50" label="电子负责人">
          <dc-view v-model="infoList.electricalDriId" objectName="user" showKey="realName" />
        </el-form-item>
        <el-form-item class="form-itme-width_50" label="机构负责人">
          <dc-view v-model="infoList.institutionsDriId" objectName="user" showKey="realName" />
        </el-form-item>
        <el-form-item class="form-itme-width_50" label="软件负责人">
          <dc-view v-model="infoList.softwareDriId" objectName="user" showKey="realName" />
        </el-form-item>
        <el-form-item class="form-itme-width_50" label="电气负责人">
          <dc-view v-model="infoList.electricalDriId" objectName="user" showKey="realName" />
        </el-form-item>
        <el-form-item class="form-itme-width_50" label="PM负责人">
          <dc-view v-model="infoList.pmDriId" objectName="user" showKey="realName" />
        </el-form-item>
        <el-form-item class="form-itme-width_100" label="评审项">
          <span class="write-btn" @click="openWriteDialog">去查看</span>
        </el-form-item>
        <el-form-item class="form-itme-width_100" label="评审说明">
          {{ infoList.assessment || '-' }}
        </el-form-item>
        <el-form-item class="form-itme-width_100" label="相关附件">
          <dc-upload
            v-model="infoList.reviewData"
            :limit="10"
            :isUpload="false"
            :isRemove="false"
            :targetType="Const.targetType.CUSTOMER"
          />
        </el-form-item>
      </div>
      <div class="group-box" id="conclusion-and-recommendations">
        <div class="form-group-title">会议信息</div>
        <div>
          <el-form-item class="form-itme-width_50" label="评审方式" prop="dcConference">
            <dc-dict type="text" :options="DC_CONFERENCE" :value="formData.dcConference" />
          </el-form-item>
          <el-form-item
            class="form-itme-width_50"
            label="会议地址"
            prop="reviewRecordMeetingAddress"
          >
            {{ formData.reviewRecordMeetingAddress }}
          </el-form-item>
          <el-form-item class="form-itme-width_50" label="记录人" prop="reviewRecordNoteTaker">
            <dc-view
              v-model="formData.reviewRecordNoteTaker"
              objectName="user"
              showKey="realName"
            />
          </el-form-item>
          <el-form-item class="form-itme-width_50" label="评审时间">
            {{ formData.reviewRecordTime }}
          </el-form-item>
          <el-form-item class="form-itme-width_50" label="受评人">
            <dc-view v-model="formData.reviewRecordReviewee" objectName="user" showKey="realName" />
          </el-form-item>
          <el-form-item
            class="form-itme-width_50"
            label="常任负责人"
            prop="reviewRecordPersonLiable"
          >
            <dc-view
              v-model="formData.reviewRecordPersonLiable"
              objectName="user"
              showKey="realName"
            />
          </el-form-item>
        </div>
      </div>

      <div class="group-box" id="conclusion-and-recommendations">
        <div class="form-group-title">参评人员</div>
        <div class="w-full">
          <el-form-item
            class="form-itme-width_100"
            label="参评人员"
            prop="reviewRecordAttendee"
            disabled
          >
            <dc-view v-model="formData.reviewRecordAttendee" objectName="user" showKey="realName" />
          </el-form-item>
        </div>
      </div>

      <div class="group-box" id="conclusion-and-recommendations">
        <div class="form-group-title">评审结论</div>
        <div class="w-full">
          <el-form-item
            class="form-itme-width_100"
            label="评审结论"
            prop="reviewRecordAttendee"
            disabled
          >
            <el-radio-group v-model="formData.reviewResult" v-if="props.info.edit">
              <el-radio v-for="item in DC_REVIEW_RESULT" :key="item.id" :label="item.value">
                {{ item.label }}
              </el-radio>
            </el-radio-group>
            <el-radio-group v-model="formData.reviewResult" v-else>
              <el-radio
                v-for="item in DC_REVIEW_RESULT"
                :key="item.id"
                :label="item.value"
                disabled
              >
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </div>

      <div class="group-box" id="conclusion-and-recommendations">
        <div class="form-group-title">评审问题单</div>
        <div class="w-full">
          <div style="margin-bottom: 20px">
            <!-- <dc-select-dialog v-model="editableTabs" returnType="object" v-if="props.info.edit">
              <el-button size="small" plain> 新建问题集 </el-button>
            </dc-select-dialog> -->
            <el-button size="small" plain @click="addTab(editableTabsValue)" v-if="props.info.edit">
              新建问题集
            </el-button>
          </div>
          <el-tabs
            v-model="editableTabsValue"
            type="card"
            class="demo-tabs"
            closable
            @tab-remove="removeTab"
          >
            <el-tab-pane
              v-for="item in editableTabs"
              :key="item.name"
              :label="item.title"
              :name="item.content"
            >
              <template #default>
                <div
                  v-for="(item, index) in props.info.record.problemAllocationMap[editableTabsValue]
                    .items"
                  :key="index"
                >
                  <el-form
                    ref="submitFormRef"
                    :model="problemAllocationMapItem"
                    :rules="rules"
                    label-width="120px"
                    class="custom-form mt-4"
                  >
                    <div class="form-item-info">
                      <el-form-item
                        class="form-itme-width_50 items-center"
                        :label="`问题${index + 1}`"
                        prop="reviewProblem"
                      >
                        <el-input
                          :value="item.reviewProblem"
                          :autosize="{ minRows: 2, maxRows: 4 }"
                          type="textarea"
                          placeholder="Please input"
                          readonly
                        />
                      </el-form-item>
                      <el-form-item
                        class="form-itme-width_50 items-center"
                        label="附件"
                        prop="reviewAttachments"
                      >
                        <dc-upload
                          v-model="item.reviewAttachments"
                          :isUpload="false"
                          :isRemove="false"
                          :targetType="Const.targetType.P_PROJECT"
                        />
                      </el-form-item>
                      <el-form-item
                        class="form-itme-width_50 items-center"
                        label="提议人"
                        prop="reviewProposer"
                      >
                        <dc-select-user
                          v-model="item.reviewProposer"
                          placeholder="请选择"
                          :multiple="false"
                          :multiple-limit="1"
                        />
                      </el-form-item>
                      <el-form-item
                        class="form-itme-width_50 items-center"
                        label="预计完成时间"
                        prop="reviewCompletionTime"
                      >
                        <el-input :value="item.reviewCompletionTime" clearable readonly />
                      </el-form-item>
                    </div>
                  </el-form>
                </div>
                <el-button size="small" plain @click="handleDrawerClick" v-if="props.info.edit"
                  >新建问题</el-button
                >
              </template>
            </el-tab-pane>
          </el-tabs>
          <el-form-item class="form-itme-width_100">
            <div class="form-itme-btn">
              <el-button type="primary" @click="subimtForm">保存评审结论</el-button>
            </div>
          </el-form-item>
        </div>
      </div>
    </el-form>
  </div>
  <!--人员选则器-->
  <user :isDialog="true" @confirm="confirmPeopleSelector" ref="PeopleSelectorRef" />
  <!-- 问题集 -->
  <el-dialog
    class="dialog"
    v-model="writeOpen"
    title="审核项填写"
    width="1500"
    destroy-on-close
    append-to-body
    @close="closeWriteDialog"
  >
    <template #header> 审核项填写 </template>
    <div class="table-container">
      <el-table
        :data="props.info.problemRecordMap"
        :span-method="objectSpanMethod"
        height="100%"
        border
      >
        <el-table-column prop="reviewDimensionName" label="分类" width="160" align="center" />
        <el-table-column prop="index" label="序号" width="60" align="center" />
        <el-table-column
          prop="reviewDimensionSplit"
          min-width="180"
          label="评审内容"
          align="center"
        />
        <el-table-column prop="reviewWeight" label="重要性" align="center">
          <template #default="scoped">
            <dc-dict :options="DC_REVIEW_WEIGHT" :value="scoped.row.reviewWeight"></dc-dict>
          </template>
        </el-table-column>
        <el-table-column prop="reviewConformTo" label="自评结论" align="center">
          <template #default="scoped">
            <el-select v-model="scoped.row.reviewConformTo" placeholder="请选择" clearable disabled>
              <el-option
                v-for="item in DC_REVIEW_ISSUES_RESULT"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="reviewHeadResult" label="上级评审" align="center">
          <template #default="scoped">
            <el-input
              v-model="scoped.row.reviewHeadResult"
              :rows="2"
              type="textarea"
              placeholder="请输入"
              disabled
            />
          </template>
        </el-table-column>
      </el-table>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeWriteDialog">关闭</el-button>
        <el-button type="primary" @click="userConfirm">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 新建抽屉 -->
  <el-drawer v-model="open.drawer" width="600px" :title="open.operateTitle" @close="cancel">
    <el-form
      ref="drawerSubmitFormRef"
      :model="problemAllocationMapItem"
      :rules="rules"
      label-width="auto"
    >
      <el-form-item label="问题" prop="reviewProblem">
        <el-input
          v-model="problemAllocationMapItem.reviewProblem"
          placeholder="请输入"
          clearable
          :autosize="{ minRows: 2, maxRows: 4 }"
          type="textarea"
        />
      </el-form-item>
      <el-form-item label="附件" prop="reviewAttachments">
        <dc-upload
          v-model="problemAllocationMapItem.reviewAttachments"
          :limit="10"
          :targetType="Const.targetType.P_PROJECT"
        />
      </el-form-item>
      <el-form-item label="提议人" prop="reviewProposer">
        <dc-select-user
          v-model="problemAllocationMapItem.reviewProposer"
          placeholder="请选择提议人"
          :multiple="false"
          :multiple-limit="1"
        />
      </el-form-item>
      <el-form-item label="预计完成时间" prop="reviewCompletionTime">
        <el-date-picker
          v-model="problemAllocationMapItem.reviewCompletionTime"
          type="date"
          placeholder="请选择预计完成时间"
          format="YYYY/MM/DD"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="drawerSubmitForm">提交</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup name="customerSubmit">
import { reactive, toRefs, getCurrentInstance, onMounted } from 'vue';
import Api from '@/api';
import Const from '@/const';
import { useRouter, useRoute } from 'vue-router';

const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const { DC_CONFERENCE, DC_REVIEW_ISSUES_RESULT, DC_REVIEW_WEIGHT, DC_REVIEW_RESULT } =
  proxy.useCache([
    { key: 'DC_CONFERENCE' },
    { key: 'DC_REVIEW_ISSUES_RESULT' },
    { key: 'DC_REVIEW_WEIGHT' },
    { key: 'DC_REVIEW_RESULT' },
  ]);
const props = defineProps({
  // 详情
  info: {
    type: Object,
    default: {},
  },
});

const pageData = reactive({
  loading: false,
  formData: {},
  rules: {
    reviewProblem: [{ required: true, message: '请输入', trigger: 'blur' }],
    reviewProposer: [{ required: true, message: '请选择', trigger: 'blur' }],
    reviewCompletionTime: [{ required: true, message: '请选择', trigger: 'blur' }],
  },
  PeopleSelectorRef: null,
  infoList: {},
  writeOpen: false,
  editableTabs: [],
  editableTabsValue: '0',
  problemAllocationMapItem: {},
  open: {
    drawer: false,
    operateTitle: '新建问题集',
  },
  reviewRecordProblemIds: [],
  tabIndex: null,
  reviewProsecutionIds: null,
});

const {
  loading,
  formData,
  rules,
  PeopleSelectorRef,
  infoList,
  writeOpen,
  editableTabs,
  editableTabsValue,
  problemAllocationMapItem,
  open,
  reviewRecordProblemIds,
  tabIndex,
  reviewProsecutionIds,
} = toRefs(pageData);

onMounted(() => {
  getWriteData();
  infoList.value = props.info;
  const timer = setTimeout(() => {
    formData.value = props.info.record;
    formData.value.reviewRecordReviewee = props.info.reviewReviewee;
    // 评审结论默认通过
    formData.value.reviewResult = '1866303255464820737';
    clearTimeout(timer);
  }, 400);
});

// 确认创建
const subimtForm = async () => {
  proxy.$refs['formRef'].validate(async valid => {
    if (valid) {
      const ids = proxy.arrayToIdsString({
        array: formData.value.reviewRecordAttendee,
      });
      const files = proxy.arrayToIdsString({
        array: infoList.value.reviewData,
      });
      const form = {
        ...props.info,
        record: {
          ...formData.value,
          reviewRecordAttendee: ids,
          reviewRecordProblemIds: reviewRecordProblemIds.value.join(','),
        },
        id: route.params.id,
        reviewData: files,
      };

      const res = await Api.pdp.dcReview.ReviewConclusionSubmit(form);
      const { code, msg } = res.data;
      if (code === 200) {
        proxy.$message.success(msg);
        router.push('/pdp/review/list');
      }
    }
  });
};

// 打开填写项弹窗
const openWriteDialog = () => {
  writeOpen.value = true;
};

// 关闭填写项弹窗
const closeWriteDialog = () => {
  writeOpen.value = false;
};

//  确定按钮
const userConfirm = () => {
  writeOpen.value = false;
  selectedData.value = props.info.problemRecordMap.filter(item => item.reviewHeadResult);
};

// 获取评审项列表
const getWriteData = async () => {
  const groupedData = {};
  if (Array.isArray(props.info.problemRecordMap)) {
    props.info.problemRecordMap.forEach(item => {
      const key = item.reviewDimensionSplitId;
      if (!groupedData[key]) {
        groupedData[key] = [];
      }
      groupedData[key].push(item);
    });
  }

  // 添加序号
  props.info.problemRecordMap = Object.values(groupedData).flatMap(group =>
    group.map((item, index) => ({
      ...item,
      index: index + 1,
    }))
  );
};

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    const currentId = props.info.problemRecordMap[rowIndex].reviewDimensionSplitId;
    const prevId =
      rowIndex > 0 ? props.info.problemRecordMap[rowIndex - 1].reviewDimensionSplitId : null;

    // 如果是第一行，或者ID与上一行不同
    if (rowIndex === 0 || currentId !== prevId) {
      // 计算当前ID的重复行数
      const count = props.info.problemRecordMap.filter(
        item => item.reviewDimensionSplitId === currentId
      ).length;
      return {
        rowspan: count,
        colspan: 1,
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  }
};

const addTab = () => {
  PeopleSelectorRef.value.openDialog();
};

const confirmPeopleSelector = data => {
  reviewProsecutionIds.value = data[0].id;
  const newTabName = `${tabIndex.value++}`;
  editableTabs.value.push({
    title: `问题集(${data[0].name})`,
    reviewProsecutionName: data[0].name,
    reviewProsecution: data[0].id,
  });
  props.info.record.problemAllocationMap.push({
    reviewProsecution: data[0].id,
    reviewProsecutionName: data[0].name,
    items: [],
  });
  editableTabsValue.value = newTabName;
};

const removeTab = targetName => {
  // 删除对应下标
  const index = editableTabs.value.findIndex(tab => tab.name === targetName);
  if (index !== -1) {
    editableTabs.value.splice(index, 1);
  }
};

// 打开抽屉 添加问题
const handleDrawerClick = () => {
  problemAllocationMapItem.value = {};
  open.value.drawer = true;
};

const cancel = () => {};

// 抽屉问题提交
const drawerSubmitForm = async () => {
  proxy.$refs['drawerSubmitFormRef'].validate(async valid => {
    if (valid) {
      const files = proxy.arrayToIdsString({
        array: problemAllocationMapItem.value.reviewAttachments,
      });
      const problemAllocationForm = {
        ...problemAllocationMapItem.value,
        targetId: props.info.record.id,
        reviewAttachments: files,
        reviewProsecution: reviewProsecutionIds.value,
      };

      const res = await Api.pdp.dcReviewProblem.submit(problemAllocationForm);
      const { code, data } = res.data;
      if (code === 200) {
        reviewRecordProblemIds.value.push(data.id);
        props.info.record.problemAllocationMap[editableTabsValue.value].items.push(data);
        open.value.drawer = false;
      }
    }
  });
};
</script>
<style lang="scss" scoped>
:deep(.el-tabs--card > .el-tabs__header) {
  border: none !important;
}
:deep(.el-tabs--card > .el-tabs__header .el-tabs__nav) {
  border: none !important;
}
:deep(.el-tabs--card > .el-tabs__header .el-tabs__item) {
  border: none !important;
}
:deep(.el-radio__input.is-disabled + span.el-radio__label) {
  color: #333 !important;
}
.form-item-info {
  width: 75% !important;
}
</style>
